{% from 'bootstrap/nav.html' import render_nav_item %}
<!doctype html>
<html lang="en" style="position:relative; min-height: 100%;">
  <head>
    {% block head %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    {% block styles %}
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/bootstrap.min.css') }}">
    {% endblock %}

    <title>RTKBase</title>
    {% endblock %}
  </head>
  <body style="min-height: 100vh; display:flex; flex-direction: column;">
    <div class="container">
      <ul class="nav nav-pills nav-justified bg-light font-weight-bolder text-uppercase">
        <li class="nav-item">{{ render_nav_item('status_page', 'Status') }}</li>
        <li class="nav-item">{{ render_nav_item('settings_page', 'Settings') }}</li>
        <li class="nav-item">{{ render_nav_item('logs_page', 'Logs') }}</li>
      </ul>
    </div>
    <!-- Your page content -->
    <main style="flex-grow: 1;">
    {% block content %}{% endblock %}
  </main>
    <footer style="flex-grow: 0; display: block;"></footer>
      <div class="container text-center bg-light"><span class="text-muted small">RTKBase v{{ g.version }}</span></div>
    </footer>

    {% block scripts %}
    <!-- Optional JavaScript -->
        <script type="text/javascript" src="{{ url_for('static', filename='lib/jquery-3.5.1.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='lib/bootstrap.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='lib/popper.min.js') }}"></script>        
        <script type="text/javascript" src="{{ url_for('static', filename='lib/socket.io.min.js') }}"></script>
    {% endblock %}
  </body>
</html>
